<template>
	<view class="">
		<!-- 这里是日期弹出框 -->
		<uni-popup :partsPopup="true" @close="closeEmit" ref="popup" type="bottom" background-color="#fff">
			<view class="dateBox">
				<view class="line">
					<view></view>
				</view>

				<view class="dateContent">
					<view class="date_title">选择日期</view>
					<view class="date_content-box">
						<view v-for="(item, index) in dateList" :key="index"
							:class="['date_item', item.type == filter.dateType ? 'actDate' : '']"
							@click="chooseDate(item)">
							{{ item.name }}
						</view>
					</view>
					<view class="date_content-box">
						<view :class="['date_item', 'custom_date_item', filter.dateType == 4 ? 'actDate' : '']"
							@click="chooseDate({ name: '自定义', type: 4 })">
							{{ filter.dateType == 4 ? filter.startTime : '开始时间' }}
						</view>
						<view class="date_line">-</view>
						<view :class="['date_item', 'custom_date_item', filter.dateType == 4 ? 'actDate' : '']"
							@click="chooseDate({ name: '自定义', type: 4 })">
							{{ filter.dateType == 4 ? filter.endTime : '结束时间' }}
						</view>
					</view>
				</view>
				<view class="date_bottom" :style="{ paddingBottom: safeAreaBottom + 'px' }">
					<view class="date_bottom_left">
						<view class="radio" @click="changeApply">
							<radio color="#0091ff " style="transform:scale(0.7)" :checked="filter.applyToAll" />
							<span :style="{ color: filter.applyToAll ? '#0091ff' : '#666' }">应用到所有图表</span>
						</view>
					</view>
					<view class="date_bottom_right" @click="comfireChooseDate">
						<view>确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<time-select :beforeToday="true" :atterToday="true" :name="filter.name" v-if="selectTimePopup"
			:isChooseToday="true" @close="closeSelectTimePopup"></time-select>
	</view>
</template>

<script>
import unipopup from '@/components/uni-popup/uni-popup.vue';
import { getLastDates } from '@/utils/tools.js';
import timeSelect from '../timeSelect.vue';
import { getNowTime } from '@/utils/utils.js';
export default {
	components: { unipopup, timeSelect },
	data() {
		return {
			filter: {
				id: '',
				name: '',
				dateType: 2, // 日期范围 1今天，2近七天，3近30天，4自定义日期
				startTime: '',
				endTime: '',
				applyToAll: false
			},
			tabNums: 0,
			dateList: [{ name: '今天', type: 1 }, { name: '近7天', type: 2 }, { name: '近30天', type: 3 }],

			selectTimePopup: false,
			safeAreaBottom: 0

		};
	},
	created() {
		uni.$on('openTimeFilter', this.initData);
		uni.$on('closeTimeFilter', this.closed);
	},
	beforeDestroy() {
		uni.$off('openTimeFilter', this.initData);
		uni.$off('closeTimeFilter', this.closed);
	},
	methods: {
		closeEmit(res) {
			console.log('closeEmit', res);
			uni.$emit('closeTimeFilter', false);
		},
		closed() {
			this.$refs.popup.close();
		},
		initData(res) {
			console.log('打开日期选择弹窗', res);
			this.safeAreaBottom = res.safeAreaBottom;
			if (res.name && res.name.indexOf('achievements') != -1) {
				this.dateList = [{ name: '近7天', type: 2 }, { name: '近30天', type: 3 }];
			} else {
				this.dateList = [{ name: '今天', type: 1 }, { name: '近7天', type: 2 }, { name: '近30天', type: 3 }];
			}
			this.filter = JSON.parse(JSON.stringify(res));
			this.filter.applyToAll = false;

			this.$refs.popup.open();
		},
		filterFuc(val) {
			if (val == 1) {
				// 今天
				const dates = getLastDates(0);
				this.filter.startTime = dates.startTime;
				this.filter.endTime = dates.endTime;
			}
			if (val == 2) {
				// 近七天
				const dates = getLastDates(7);
				this.filter.startTime = dates.startTime;
				this.filter.endTime = dates.endTime;
			}
			if (val == 3) {
				// 近30天
				const dates = getLastDates(30);
				this.filter.startTime = dates.startTime;
				this.filter.endTime = dates.endTime;
			}
			if (val == 4) {
				this.selectTimePopup = true;
				return;
			}
			// console.log(val, '选择日期');
			this.filter.dateType = val;
		},
		changeApply(res) {
			// if (this.filter.dateType == 1 && this.filter.id !== 'contractSource' && this.filter.id !== 'contractTrend') {
			// 	return;
			// }
			this.filter.applyToAll = !this.filter.applyToAll;
		},
		// 选择日期
		chooseDate(item) {
			// if (this.filter.type == 1 && this.filter.id !== 'contractSource' && this.filter.id !== 'contractTrend') {
			// 	this.filter.applyToAll = false;
			// }

			this.filterFuc(item.type);
		},
		// 时间组件确认
		comfireChooseDate() {
			console.log(this.filter, 'comfireChooseDate');
			uni.$emit(this.filter.id, this.filter);
			uni.$emit('closeTimeFilter', false);
			// this.$refs.popup.close();
		},
		// 自定义日期确定按钮
		closeSelectTimePopup(res) {
			if (res) {
				console.log('自定义日期', res);
				let start = '';
				let end = '';

				if (res.indexOf('-') != -1) {
					const timeArr = res.split('-');
					start = timeArr[0].replaceAll('.', '/');
					end = timeArr[1].replaceAll('.', '/');
				} else {
					const time = res.replaceAll('.', '/');
					start = time;
					end = time;
				}
				const nowDay = getNowTime();
				let nowtime = new Date(nowDay).getTime();
				let starttime = new Date(start).getTime();
				let endtime = new Date(end).getTime();
				if (endtime >= nowtime) {
					console.log('包含今天');
					uni.showToast({
						title: '自定义日期范围须小于今天',
						icon: 'none'
					});
					return;
				}

				this.filter.startTime = start;
				this.filter.endTime = end;
				this.filter.dateType = 4;
			}
			this.selectTimePopup = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.dateBox {
	.line {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 18rpx;
		padding-bottom: 20rpx;

		view {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
		}
	}

	height: 522rpx;
	background-color: #fff;
	border-radius: 8rpx 8rpx 0rpx 0rpx;
	box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
	box-sizing: border-box;

	.dateContent {
		padding-left: 40rpx;
		padding-right: 22rpx;
	}

	.date_title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 68rpx;
	}

	.date_content-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 52rpx;

		.date_line {
			width: 68rpx;
			color: #666;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.date_item {
			// width: 216rpx;
			height: 48rpx;
			border: 2rpx solid #cccccc;
			border-radius: 8rpx;
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			color: #666;
		}

		.date_item:nth-child(2) {
			margin: 0 20rpx;
		}

		.custom_date_item {
			color: #cccc;
		}

		.date_bottom {
			height: 108rpx;
		}

		.actDate {
			color: #0091ff;
			border-color: #0091ff;
		}
	}

	.date_bottom {
		display: flex;
		// position: fixed;
		width: 100%;
		bottom: 10rpx;
		padding: 24rpx 0;
		border-top: 2rpx solid #eeeeee;

		.date_bottom_left {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
		}

		.date_bottom_right {
			display: flex;
			width: 478rpx;
			justify-content: center;
			border-left: 2rpx solid #eee;

			view {
				width: 412rpx;
				height: 70rpx;
				background: #0091ff;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
			}
		}
	}
}
</style>
